import { connect } from "react-redux";
import { getVideo, getUser, removeLike, setPgc, removePgc, removeWorksLike, setWorksLike, getCommentList, setAuthorAndPgc } from "../action/action"
import "../css/Video.scss";
import { getCookie, setCookie } from './../js/cookie';
import { Toast } from 'antd-mobile';
import { setLike } from './../action/action';
import { VideoComment } from "../components/Comment";
import { PullToRefresh } from 'antd-mobile';
@connect(
    (state) => {
        return {
            video: state.video,
            userData: state.my.userData,
            commentData: state.video.commentData
        }
    }
)
export class Video extends React.Component {
    state = {
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }

    componentDidMount() {
        let { dispatch } = this.props;
        let vid = this.props.match.params.vid;
        dispatch(getVideo(vid))
        dispatch(getUser(getCookie("ky_uid"), (data) => { }));
        dispatch(getCommentList(vid, (data) => { }));
    }
    setLike(id, like) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (like.indexOf(id) == -1) {
                dispatch(setWorksLike(getCookie("ky_uid"), id, (data) => { }))
                dispatch(setLike(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        this.refs.like.className = "iconfont icon-xihuan21"
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                }))
            } else {
                dispatch(removeWorksLike(getCookie("ky_uid"), id, (data) => { }))
                dispatch(removeLike(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        this.refs.like.className = "iconfont icon-xihuan2"
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                }))
            }
            dispatch(getVideo(id))
            dispatch(getUser(getCookie("ky_uid"), (data) => { }));
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    setAttPgc(id, pgc) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (pgc.indexOf(id) == -1) {
                dispatch(setPgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
                dispatch(setAuthorAndPgc(id))
            } else {
                dispatch(removePgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    render() {
        let { videoData, worksData } = this.props.video;
        let { userData, commentData } = this.props;
        if (videoData && worksData && commentData) {
            return (
                <div className="video-box">
                    <video src={videoData.playUrl} controls autoPlay width="100%"></video>
                    <PullToRefresh
                        damping={60}
                        ref={el => this.ptr = el}
                        style={{
                            height: this.state.height,
                            overflow: 'auto',
                        }}
                        indicator={this.state.down ? {} : { deactivate: '上拉可以关闭页面' }}
                        direction={this.state.down ? 'down' : 'up'}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                            this.setState({ refreshing: true });
                            this.props.history.push(getCookie("ky_history_url"));
                        }}
                    >
                        <div className="video-content" ref="videoContent">
                            <div className="video-info">
                                <h3>{videoData.title}</h3>
                                <span>#{videoData.category}</span>/<span>{videoData.author.name}</span>
                                <p>{videoData.description}</p>
                                <div className="like-commit">
                                    <div className="like">
                                        <i ref="like" className={userData && userData.result.ulike.indexOf(videoData.id) != -1 ? "iconfont icon-xihuan21" : "iconfont icon-xihuan2"} onClick={() => { userData ? this.setLike(videoData.id, userData.result.ulike) : Toast.info("未登录，请先登录", 1); }}></i>
                                        <span>{worksData.vlike.length}</span>
                                    </div>
                                    <div className="commit">
                                        <i className="iconfont icon-comment" onClick={() => {
                                            this.refs.videoContent.style.display = "none";
                                            this.refs.videoCommit.firstElementChild.style.display = "block";
                                        }}></i>
                                        <span>{commentData.length}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="info cl">
                                <a onClick={() => { this.props.history.push("/author/" + videoData.author.id); }}>
                                    <div className="via">
                                        <img src={videoData.author.icon} />
                                    </div>
                                    <div className="msg">
                                        <h4>{videoData.author.name} </h4>
                                        <p>{videoData.author.description}</p>
                                    </div>
                                </a>
                                <span onClick={() => { userData ? this.setAttPgc(videoData.author.id, userData.result.uatt_pgc) : Toast.info("未登录，请先登录", 1); }}>{userData && userData.result.uatt_pgc.indexOf(videoData.author.id) != -1 ? "已关注" : "+关注"}</span>
                            </div>
                        </div>
                        <div className="video-commit" ref="videoCommit">
                            <VideoComment {...this.props} />
                        </div>
                    </PullToRefresh>
                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}